<template>
	<view class="bgf8">
		<wuc-tab :tab-list="tabList" :tabCur.sync="TabCur" @change="tabChange" textFlex style="margin-bottom: 20upx;">
		</wuc-tab>
		<view class="tabchange" v-for="(item,index) in list" :key="index" @click.stop="detail(item.id)">
			<view class="uniBtn">
				<view>患者：{{item.user.name}}
					<text v-if="item.user.sex == 1" class="line">男</text>
					<text v-else class="line">女</text>
					{{item.user.nianling}}
				</view>
				<view :class="[item.status==1?'stu3':'',item.status==2?'stu':'',item.status==3?'stu2':'']">
					<text v-if="item.status == 1">待看诊</text>
					<text v-else-if="item.status == 2">待支付</text>
					<text v-else-if="item.status == 3">待确定</text>
					<text v-else>已结束</text>
				</view>
			</view>
			<view>挂号医院：{{item.company_title}}</view>
			<view>挂号医生：{{item.ys.name}}</view>
			<view>挂号时间：{{item.time}}</view>
			<!-- <view class="uniBtn">
				<view>剂型：中药饮片</view>
				<view class="stu">￥16.48</view>
			</view> -->
			<view class="base">
				<view v-if="item.status == 2" @click.stop="pay(item.oid)">立即支付</view>
				<view v-if="item.status == 3" @click.stop="sure(item.oid,index)">确认收货</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		wenzhenlist,shwc
	} from '../../request/api.js'
	import WucTab from '@/components/wuc-tab/wuc-tab.vue';
	export default {
		components: {
			WucTab
		},
		data() {
			return {
				TabCur: 0,
				tabList: [{
					name: '已挂号'
				}, {
					name: '已看诊'
				}, {
					name: '已支付'
				}, {
					name: '已结束'
				}],
				// 上拉加载
				page: 1,
				pages: 0,
				list: []
			}
		},
		onLoad() {
			this.getList(1)
		},
		onReachBottom: function() {
			//触底的时候请求数据，即为上拉加载更多
			this.page++;
			if (this.page > this.pages) {
				uni.hideNavigationBarLoading();
				uni.showToast({
					title: '暂无更多数据',
					icon: 'none'
				})
			} else {
				this.getList(this.page);
			}
		},
		methods: {
			tabChange(index) {
				this.TabCur = index;
				this.list = [];
				this.page = 1;
				this.pages = 0;
				this.getList(1)
			},
			// 列表
			getList(page) {
				var that = this
				uni.showLoading({
					title: '加载中...'
				})
				let status = this.TabCur + 1
				wenzhenlist({
					page: page,
					listRows: 20,
					status: status
				}).then(res => {
					this.pages = res.data.totalPages;
					if (this.page == 1) {
						this.list = res.data.data;
						if (this.list.length === 0 || this.list.length === '0') {
							uni.showToast({
								icon: 'none',
								duration: 3000,
								title: '暂无数据'
							});
							return
						}
					} else {
						this.list = this.list.concat(res.data.data);
					}
					uni.hideLoading()
					uni.hideNavigationBarLoading()
				})
			},
			detail(id) {
				uni.navigateTo({
					url:'./detail?id='+id
				})
			},
			pay(id) {
				uni.navigateTo({
					url:'./pay?id='+id
				})
			},
			sure(id,index) {
				shwc({id:id}).then(res=>{
					uni.showToast({
						title:'操作成功',
						icon:'none'
					})
					this.list.splice(index, 1);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f8f8f8;
	}

	.tabchange {
		background: #ffffff;
		margin: 20upx 0;
		padding: 30upx;
		line-height: 160%;
		font-size: 30upx;

		.stu {
			color: #EE2727;
		}

		.stu1 {
			color: #009688;
		}

		.stu2 {
			color: #008000;
		}

		.stu3 {
			color: #FFB800;
		}

		.stu4 {
			color: #666666;
		}

		.stu5 {
			margin: 0 15upx;
		}

		.stu6-7 {
			color: #ffffff;
			font-size: 26upx;
			padding: 3upx 10upx;
			border-radius: 5upx;
		}

		.stu6 {
			background: #1E9FFF;
		}

		.stu7 {
			background: #DEA512;
		}

		.line {
			margin: 0 30upx;
		}

		.base {
			margin-top: 20upx;
			display: flex;
			justify-content: flex-end;

			view {
				width: 220upx;
				background: #F86C53;
				opacity: 1;
				border-radius: 44upx;
				font-family: Source Han Sans CN;
				color: #FFFFFF;
				text-align: center;
				padding: 10upx 0;
			}
		}
	}
</style>
